<!--设置模块唯一ID-->
<div id="lhd_ditu">
<!--标题、面包屑-->
<section class="content-header">
    <h1>
        绿化队区域地图
        <small>绿化队</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li>绿化队</li>
        <li class="active">绿化队地图</li>
    </ol>
</section>
<!--列表-->
<section class="content">
    <div class="lhd_ditu_wrap">
        <div class="lhd_ditu">
            <img src="./dist/img/lvhuadui/lhd_1.png" class="lhd_1"/>
            <img src="./dist/img/lvhuadui/lhd_2.png" class="lhd_2"/>
            <img src="./dist/img/lvhuadui/lhd_3.png" class="lhd_3"/>
            <img src="./dist/img/lvhuadui/lhd_4.png" class="lhd_4"/>
            <img src="./dist/img/lvhuadui/lhd_5.png" class="lhd_5"/>
            <img src="./dist/img/lvhuadui/lhd_6.png" class="lhd_6"/>
            <img src="./dist/img/lvhuadui/lhd_7.png" class="lhd_7"/>
            <img src="./dist/img/lvhuadui/lhd_8.png" class="lhd_8"/>
            <img src="./dist/img/lvhuadui/lhd_9.png" class="lhd_9"/>
            <img src="./dist/img/lvhuadui/lhd_10.png" class="lhd_10"/>
            <img src="./dist/img/lvhuadui/lhd_11.png" class="lhd_11"/>
            <img src="./dist/img/lvhuadui/lhd_12.png" class="lhd_12"/>
            <img src="./dist/img/lvhuadui/lhd_13.png" class="lhd_13"/>
            <img src="./dist/img/lvhuadui/lhd_14.png" class="lhd_14"/>
            <img src="./dist/img/lvhuadui/lhd_15.png" class="lhd_15"/>
            <img src="./dist/img/lvhuadui/lhd_16.png" class="lhd_16"/>
            <img src="./dist/img/lvhuadui/lhd_17.png" class="lhd_17"/>
            <img src="./dist/img/lvhuadui/lhd_18.png" class="lhd_18"/>
            <img src="./dist/img/lvhuadui/lhd_19.png" class="lhd_19"/>
            <img src="./dist/img/lvhuadui/lhd_20.png" class="lhd_20"/>
            <img src="./dist/img/lvhuadui/lhd_21.png" class="lhd_21"/>
            <img src="./dist/img/lvhuadui/lhd_22.png" class="lhd_22"/>
            <img src="./dist/img/lvhuadui/lhd_23.png" class="lhd_23"/>
            <img src="./dist/img/lvhuadui/lhd_24.png" class="lhd_24"/>
            <img src="./dist/img/lvhuadui/lhd_25.png" class="lhd_25"/>
            <img src="./dist/img/lvhuadui/lhd_26.png" class="lhd_26"/>
            <img src="./dist/img/lvhuadui/lhd_27.png" class="lhd_27"/>
            <img src="./dist/img/lvhuadui/lhd_28.png" class="lhd_28"/>
            <img src="./dist/img/lvhuadui/lhd_29.png" class="lhd_29"/>
            <img src="./dist/img/lvhuadui/lhd_30.png" class="lhd_30"/>
            <div class="mask"></div>
        </div>
    </div>
</section>

<script>
    USEN(function () {
        //模块ID(全系统唯一)
        var id = "#lhd_ditu";
        var t,l = 0;
        var $el = $(id);
        var content = [
                [
                    {"name": "家具城"},
                    {"片区名称": "家具城"},
                    {"所属地区": "家具城"},
                    {"工作人数": "1"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "水闸"},
                    {"片区名称": "水闸"},
                    {"所属地区": "京开路东"},
                    {"工作人数": "0.5"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "北高尔夫"},
                    {"片区名称": "北高尔夫"},
                    {"所属地区": "北高尔夫"},
                    {"工作人数": "4"},
                    {"负责人": "刘爱福"}
                ], [
                    {"name": "大造林"},
                    {"片区名称": "大造林"},
                    {"所属地区": "大造林及联防队"},
                    {"工作人数": "3"},
                    {"负责人": "刘爱福"}
                ], [
                    {"name": "古韵花乡"},
                    {"片区名称": "古韵花乡"},
                    {"所属地区": "京开路东"},
                    {"工作人数": "1"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "北达门口"},
                    {"片区名称": "北达门口"},
                    {"所属地区": "京开路西"},
                    {"工作人数": "0.5"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "京开大厦"},
                    {"片区名称": "京开大厦"},
                    {"所属地区": "京开路西"},
                    {"工作人数": "0.5"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "南高尔夫"},
                    {"片区名称": "南高尔夫"},
                    {"所属地区": "南高尔夫"},
                    {"工作人数": "9"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "热带雨林酒店门口"},
                    {"片区名称": "热带雨林酒店门口"},
                    {"所属地区": "热带雨林前"},
                    {"工作人数": "1"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "教堂西"},
                    {"片区名称": "教堂西"},
                    {"所属地区": "教堂西"},
                    {"工作人数": "1"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "草桥欣园四区21号楼南"},
                    {"片区名称": "草桥欣园四区21号楼南"},
                    {"所属地区": "康辛路"},
                    {"工作人数": "0.3"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "草桥欣园四区20号楼"},
                    {"片区名称": "草桥欣园四区20号楼"},
                    {"所属地区": "康辛路"},
                    {"工作人数": "0.3"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "草桥欣园八号楼南"},
                    {"片区名称": "草桥欣园八号楼南"},
                    {"所属地区": "康辛路"},
                    {"工作人数": "0.3"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "角门路辅路绿化带"},
                    {"片区名称": "角门路辅路绿化带"},
                    {"所属地区": "康辛路"},
                    {"工作人数": "2"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "大观园西区"},
                    {"片区名称": "大观园西区"},
                    {"所属地区": "大观园西区"},
                    {"工作人数": "3"},
                    {"负责人": "刘爱福"}
                ], [
                    {"name": "山坡"},
                    {"片区名称": "山坡"},
                    {"所属地区": "大观园西区"},
                    {"工作人数": "1"},
                    {"负责人": "刘爱福"}
                ], [
                    {"name": "中国插花博物馆"},
                    {"片区名称": "中国插花博物馆"},
                    {"所属地区": "博物馆"},
                    {"工作人数": "1"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "河两岸坡道绿化"},
                    {"片区名称": "河两岸坡道绿化"},
                    {"所属地区": "河两岸"},
                    {"工作人数": "1"},
                    {"负责人": "胡杨双"}
                ], [
                    {"name": "大观园办公区南"},
                    {"片区名称": "大观园办公区南"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "0.6"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "南国水乡"},
                    {"片区名称": "南国水乡"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "0.6"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "奥桥超市南"},
                    {"片区名称": "奥桥超市南"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "0.6"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "三角地东"},
                    {"片区名称": "奥桥超市南"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "0.5"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "三角地西（含日月同辉）"},
                    {"片区名称": "奥桥超市南"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "1"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "轨道中心南"},
                    {"片区名称": "轨道中心南"},
                    {"所属地区": "四环路北"},
                    {"工作人数": "0.5"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "梯田"},
                    {"片区名称": "梯田"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "0.5"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "产业园区2号厅门口"},
                    {"片区名称": "产业园区2号厅门口"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "0.5"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "产业园区西门门口"},
                    {"片区名称": "产业园区西门门口"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "0.3"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "产业园区A厅前"},
                    {"片区名称": "产业园区A厅前"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "0.3"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "大汉"},
                    {"片区名称": "大汉"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "0.3"},
                    {"负责人": "李凤强"}
                ], [
                    {"name": "骨灰堂西"},
                    {"片区名称": "骨灰堂西"},
                    {"所属地区": "四环路南"},
                    {"工作人数": "1"},
                    {"负责人": "李凤强"}
                ]
                ];


        $el.find('.lhd_ditu').on('click','img,.mask',function(){
            if($(this).is('.current') || $(this).siblings('img.current').length){
                $el.find('img.current').removeClass('current').siblings('.mask').fadeOut(300);
                return;
            }

            $(this).addClass("current").siblings('.mask').fadeIn(300);
        }).find("img").popover({
            placement:"top",
            trigger:"hover",
            html:true,
            content:function(){
                var item = content[$(this).index()];
                var el = "";
                for(var i=1;i<item.length;i++){
                    $.each(item[i],function(k,v){
                        el += '<div>'+ k + ':' + v +'</div>'
                    })
                }
                return el;
            },
            title:function(){
                return content[$(this).index()][0].name
            }
        });
    });
</script>
</div>